<div style="padding: 30px;" class="layui-form seller-alone-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <input type="hidden" name="id" value="{$info.id}">

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>设备名称：</label>
        <div class="layui-input-inline seller-inline-5">
            <input type="text" name="name" value="{$info.name}" required lay-verify="required" placeholder="请输入设备名称" autocomplete="off" class="layui-input">
        </div>
    </div>
  
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>设备类型：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="cat_id" id="cat_id" lay-filter="cat_id" lay-verify="required" disabled="true">
                <option value="">请选择设备类型</option>
                {volist name='cat_id' id='vo'}
                    <option value="{$vo.id}" {eq name="$info.cat_name" value="$vo.name"}selected{/eq}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>设备品牌：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="brand_id" id="brand_id" lay-filter="brand_id" lay-verify="required" disabled="true">
                <option value="">请选择设备品牌</option>
                {volist name='brand_id' id='vo'}
                    <option value="{$vo.id}" {eq name="$info.brand_name" value="$vo.name"}selected{/eq}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>使用场景：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="type_id" id="type_id" lay-filter="type_id" lay-verify="required" disabled="true">
                <option value="">请选择使用场景</option>
                {volist name='type_id' id='vo'}
                    <option value="{$vo.id}" {eq name="$info.type_name" value="$vo.name"}selected{/eq}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>出厂编号：</label>
        <div class="layui-input-inline seller-inline-5">
            <input type="text" name="sub_id" value="{$info.sub_id}" required lay-verify="required" placeholder="请输入设备名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>地区选择：</label>
        <div class="layui-input-inline seller-inline-4 address-class">
            {ZlServer:area name='area_id' class="select-address" lay-verify="required" value="$info.area_id" }
        </div>
    </div>

    <div class="layui-form-item" >
        <label class="layui-form-label">状态：</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" {if $info.status == 1}checked{/if}  value="1" lay-text="启用|停用">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">计费规则：</label>
        <div class="layui-input-inline" style= 'width:600px; padding-bottom: 20px;'>
            {volist name="templateList" id="vo"}
                <input type="checkbox" name="template_id[{$vo.id}]" lay-skin="primary" title="{$vo.templateInfo}" {if isset($vo['checked']) && $vo['checked']}checked=""{/if} >
            {/volist}
        </div>
    </div>

    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    <div class="layui-form-item" style="margin-top:10px">
        <div class="layui-input-block">
            {:zlserverToken()}
            <button id="device_edit_save" type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
        </div>
    </div>
</div>
<script>
    layui.use(['form','table'], function(){
        var $ = layui.$,form = layui.form,table = layui.table;
        var feeList;
        var feeIndex;
        //监听提交
        form.render(); 
 
        // 设备类型改变需要清空所有内容
        form.on('select(cat_id)', function(data){
            $("#brand_id").val('');
            form.render("select");
        });
    
        //保存设备
        form.on('submit(save)', function (data) {
            formData = data.field;
            if (!formData) {
                layer.msg('请先完善数据', { time: 1300 });
                return false;
            }

            $("#device_edit_save").addClass("layui-btn-disabled");
            $('#device_edit_save').attr("disabled", true);

            $.ajax({
                type: 'post',
                url: '{:url("Device/edit")}',
                data: formData,
                dataType: 'json',
                success: function (e) {
                    if (e.token) {
                        $(".ZlServer_Token").val(e.token);
                    }
                    if (e.status === true) {
                        layer.open({
                            type: 1
                            , offset: 'auto'
                            , id: 'layerDemoAuto'
                            , content: '<div style="padding: 20px 100px;">' + e.msg + '</div>'
                            , btn: '关闭'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0.3 //不显示遮罩
                            , yes: function () {
                                parent.layui.admin.events.changeTabAndRefresh('/manage/device/index.html');
                            }, close: function () {
                                console.log('close');
                            }, end: function() {
                                parent.layui.admin.events.changeTabAndRefresh('/manage/device/index.html');
                            }
                        });
                    } else {
                        $("#device_edit_save").removeClass("layui-btn-disabled");
                        $('#device_edit_save').removeAttr("disabled");

                        layer.msg(e.msg, { time: 1300 });
                    }
                }
            });
            return false;
        });
    });
 
</script>